<template>
  <div class="channel-edit">
    <van-cell>
      <div slot="title" class="title-title">我的频道</div>
      <van-button type="danger" size="mini" class="edit-btn" plain round
      @click ="isEdit=!isEdit"  >{{!isEdit?'编辑':'完成'}}</van-button
      >
    </van-cell>
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="grid-item"
        v-for="(item, index) in myChannels"
        :key="index"
        @click="onMyChannelClick(index)"
      >
        <span slot="text" class="text" :class="{ active: active === index }">{{
          item.name
        }}</span>
         <van-icon slot="icon" name="clear" v-show ="isEdit"/>
      </van-grid-item>
    </van-grid>
    <van-cell>
      <div slot="title" class="title-title">频道推荐</div>
    </van-cell>
    <!-- 通过 gutter 属性设置格子之间的距离。 -->
    <van-grid :gutter="10" class="recommend-grid">
      <van-grid-item
        class="grid-item"
        v-for="(item,index) in recommendChannels"
        :key="index"
        :text="item.name"
        @click="onAddChannels(item)"
      >
       <van-icon name="plus" slot="icon"></van-icon>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels } from '@/api/article'
import { setItem } from '@/utils/storage'
import { mapState } from 'vuex'
import { addUserChannel } from '@/api/user'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false // 定义数据控制编辑状态
    }
  },
  async created () {
    // 发请求恢复数据
    const res = await getAllChannels()
    this.allChannels = res.data.data.channels
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      // 标准写法,从全部频道allChannels排查我的频道myChannels
      /*
      const arr = []
      this.allChannels.forEach(t => {
        const f = this.myChannels.find(m => {
          return m.id === t.id
        })
        // 如果在我的频道当中找到频道,f不为null,为一个对象,没找到为null
        if (!f) {
          arr.push(t)
        }
      })
      return arr
      */
      // 简化写法
      /*
      return this.allChannels.filter(t => {
        const f = this.myChannels.find(m => m.id === t.id)
        // 如果返回true,会把当前循环t放到新数组,返回false,不放到新数组
        return !f
      })
      */
      // 最简单写法
      return this.allChannels.filter(t => !this.myChannels.find(m => m.id === t.id))
    }
  },
  components: {},
  mounted () {},
  watch: {
    // 子组件存数据
    myChannels (value) {
      console.log('myChannels被改动了')
      // 判断用户又没有登录
      if (this.user) {
        // 发请求
        addUserChannel(this.myChannels)
      } else {
        // 储存本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    }
  },
  methods: {
    onAddChannels (item) {
      this.myChannels.push(item)
    },
    onMyChannelClick (index) {
      if (this.isEdit) {
        // 删除
        if (index < this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
        // 判断用户有没有登录
        if (this.user) {
          // 发请求
        } else {
          setItem('TOUTIAO_CHANNELS', this.myChannels)
        }
      } else {
        // 切换
        this.$emit('update-active', index)
      }
    }
  }
}
</script>

 <style lang="less"  scoped>
.channel-edit {
  padding: 85px 0;
}
.title-text {
  font-size: 32px;
  color: #333333;
}
.edit-btn {
  width: 104px;
  height: 48px;
  font-size: 26px;
  color: #f85959;
  border: 1px solid #f85959;
}

/deep/ .grid-item {
  width: 160px;
  height: 86px;
  .van-grid-item__content {
    white-space: nowrap;
    background-color: #f4f5f6;
    .van-grid-item__text,
    .text {
      font-size: 28px;
      color: #222;
      margin-top: 0;
    }
     .active {
        color: red;
      }
    .van-grid-item-icon-wrapper {
      position: unset;
    }
  }
}
/deep/ .my-grid {
  .grid-item {
    .van-icon-clear {
      position: absolute;
      right: -80px;
      top: -30px;
      font-size: 30px;
      z-index: 2;
      color: #cacaca;
    }
  }
}
/deep/ .recommend-grid {
  .grid-item {
    .van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        top: -3px;
        font-size: 28px;
        margin-right: 6px;
      }
    }
  }
}
</style>